// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$vpn-download-mq-2xl: '(min-width: 1450px)';

@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;

.vpn-downloads {
    background-color: $color-marketing-gray-10;
}

.vpn-download-blocked {
    @include text-body-xl;
    text-align: center;
}

.vpn-downloads,
.vpn-privacy {
    .mzp-c-split {
        .mzp-c-split-container {
            min-width: unset;
        }

        .vpn-logo {
            img {
                height: 60px;
                width: 60px;
            }
        }

        @media #{$mq-md} {
            padding: $spacing-lg 0 0;
            @include text-body-xl;
        }

        // Media query to change to mobile layout sooner to avoid languages with longer words from touching the image
        @media (max-width: 810px) {
            .mzp-c-split-container {
                display: flex;
                flex-direction: column;

                .mzp-c-split-body {
                    text-align: center;
                }
            }
        }
    }
}

.vpn-download-primary-platform,
.vpn-download-secondary-list {
    .platform-body {
        h2 {
            @include text-body-xl;
            font-family: var(--body-font-family);
        }

        p {
            color: $color-marketing-gray-70;
        }
    }
}

.vpn-download-options {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: $spacing-xs;
    grid-column-gap: $spacing-xl;
    padding-top: 0;
    padding-bottom: $layout-md;

    @media #{$vpn-download-mq-2xl} {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
        align-items: center;
    }
}

// Primary platform styles
.vpn-download-primary-platform {
    justify-self: center;

    .primary-platform {
        flex-direction: column;
        align-items: center;
        text-align: center;
        border-radius: 6px;
        box-shadow: $box-shadow-sm;
        padding: $spacing-xl;
        display: none;

        .platform-link-container {
            display: flex;
            gap: $spacing-sm;
        }

        .platform-image {
            margin-bottom: $spacing-xl;
        }

        .current-platform-lede {
            color: $color-violet-70;
        }

        &.android,
        &.ios {
            .platform-download-link {
                display: block;
            }
        }

        &.android {
            .platform-download-link {
                img {
                    width: 220px;
                }
            }
        }

        &.ios {
            .platform-download-link {
                img {
                    width: 170px;
                }
            }
        }
    }

    h3 {
        text-align: center;
        margin-top: $spacing-2xl;
    }

    @media #{$mq-sm} {
        h3 {
            display: block;
        }
    }

    @media #{$mq-md} {
        .primary-platform {
            width: 380px;
        }
    }

    @media #{$vpn-download-mq-2xl} {
        width: 100%;

        h3 {
            display: none;
        }
    }
}

// Secondary platform styles
.vpn-download-secondary-list {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-row-gap: $spacing-lg;
    margin-bottom: 0;
    justify-self: center;

    .secondary-platform {
        border-radius: 6px;
        box-shadow: $box-shadow-sm;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: $spacing-lg;

        img {
            display: block;
            width: 64px;
        }

        .platform-body {
            margin-left: $spacing-xl;
            margin-right: $spacing-2xl;

            p {
                margin-bottom: 0;
            }
        }

        .platform-link-container {
            display: flex;
            flex-direction: column;
            gap: $spacing-sm;
        }

        .platform-link-container .mzp-c-button:has(.platform-download-linux-arrow) {
            display: flex;
            gap: 10px;
            justify-content: center;
        }

        .platform-download-linux-arrow {
            background-color: currentColor;
            -webkit-mask: url('/media/img/products/vpn/download/vpn-download-icon-simple.svg') no-repeat center/16px 16px;
            mask: url('/media/img/products/vpn/download/vpn-download-icon-simple.svg') no-repeat center/16px 16px;
            height: 16px;
            width: 16px;
        }

        .platform-download-link {
            background-image: url('/media/img/products/vpn/download/vpn-download-icon.svg');
            background-repeat: no-repeat;
            background-size: contain;
            border-radius: 50%;
            height: 45px;
            width: 45px;

            span {
                @include visually-hidden;
            }

            &:hover,
            &:focus,
            &:active {
                background-color: $color-light-gray-30;
            }
        }
    }

    @media #{$mq-xs} {
        .secondary-platform {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-shrink: 0;
            padding: $spacing-lg;
            text-align: center;

            .platform-body {
                margin: $spacing-md 0;
            }

            .platform-download-link {
                margin-left: unset;
            }
        }
    }

    @media #{$mq-sm} {
        .secondary-platform {
            flex-direction: row;
            min-height: 165px;
            width: 350px;
            padding: 0 $spacing-lg;
            text-align: left;

            .platform-body {
                margin: $spacing-md;
            }

            .platform-download-link {
                margin-left: auto;
            }
        }
    }

    @media #{$mq-lg} {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: $spacing-xl;
        grid-row-gap: $spacing-xl;

        .secondary-platform.firefox-extension {
            width: calc(100% - 2 * $spacing-lg);
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 2;
        }
    }

    @media #{$vpn-download-mq-2xl} {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
        grid-column-gap: $spacing-xl;
        grid-row-gap: $spacing-xl;
        justify-self: end;
    }
}

// Style rules for dynamically rendering content based on platforms

/* stylelint-disable-next-line  */
.vpn-downloads {
    .js.windows & {
        .primary-platform.windows {
            display: block;
        }

        .secondary-platform.windows {
            display: none;

            &.firefox-extension {
                display: flex;
            }
        }
    }

    .js.osx & {
        .primary-platform.macos {
            display: block;
        }

        .secondary-platform.macos {
            display: none;
        }

        .secondary-platform.firefox-extension {
            display: none;
        }
    }

    .js.linux & {
        .primary-platform.linux {
            display: block;
        }

        .secondary-platform.linux {
            display: none;
        }

        .secondary-platform.firefox-extension {
            display: none;
        }
    }

    .js.ios & {
        .primary-platform.ios {
            display: block;
        }

        .secondary-platform.ios {
            display: none;
        }

        .secondary-platform.firefox-extension {
            display: none;
        }
    }

    .js.android & {
        .primary-platform.android {
            display: block;
        }

        .secondary-platform.android {
            display: none;
        }

        .secondary-platform.firefox-extension {
            display: none;
        }
    }
}

.vpn-download-previous-versions {
    display: flex;
    justify-content: center;
    padding-bottom: $layout-lg;
    padding-top: 0;

    a {
        color: $color-black;
        font-weight: 700;
    }

    @media #{$vpn-download-mq-2xl} {
        justify-content: flex-end;
    }
}

.vpn-privacy {
    margin: $layout-lg 0 $layout-xl;
}
